<template>
	<view class="bill-list">
		<!-- 账单项 -->
		<view class="bill-item" v-for="(item, index) in billList" :key="index" @click="viewDetails(item.id)">
			<view class="bill-header">
				<view class="left">
					<view class="bill-title">{{item.title}}</view>
					<view class="bill-status" :class="item.status === 'ongoing' ? 'status-ongoing' : 'status-completed'">
						{{item.status === 'ongoing' ? t('billing.jxz') : t('billing.yjs')}}
					</view>
				</view>
				<view class="right">
					<text>{{t('wallet.xq')}}</text>
					<image src="/static/image/my/detail.svg" mode=""></image>
				</view>
			</view>
			<view class="bill-content">
				<view class="content-row">
					<view class="content-label">{{t('billing.gmje')}}</view>
					<view class="content-label">{{t('billing.zq')}}</view>
					<view class="content-label">{{t('billing.ll')}}</view>
					<view class="content-label">{{t('billing.zsy')}}</view>
				</view>
				<view class="content-row values">
					<view class="content-value">{{item.amount}}</view>
					<view class="content-value">{{item.period}}</view>
					<view class="content-value rate">{{item.rate}}</view>
					<view class="content-value profit">{{item.profit}}</view>
				</view>
			</view>
			<view class="bill-action">
				<view class="action-details">
					{{t('billing.xq')}} ≡
				</view>
			</view>
		</view>

		<!-- 空列表提示 -->
		<view class="empty-list" v-if="billList.length === 0">
			<text>{{t('billing.wgd')}}</text>
		</view>
	</view>
</template>

<script>
</script>

<style>
</style>